<template>
	<div class="view-home">
		<VSideMenu></VSideMenu>
		<div class="page-scroller">
			<div class="home-header flex">
				<div class="item-left">
					<img class="userImg" @click="openSideMenu" src="../../../../static/img/user/head-portrait.png" />
				</div>
				<div class="item-right flex-1">
					<div class="search-box">
						<i class="iconfont icon-sousuo"></i>
						<span class="search-content">
							熊猫tv十周年庆
						</span>
					</div>
				</div>
			</div>
			<div class="promo-panel">
				<mt-swipe :auto="3000">
					<mt-swipe-item>
						<div class="promo-item flex flex-center-vh">
							<img src="./images/promo-item-img-1.jpeg" />
						</div>
					</mt-swipe-item>
					<mt-swipe-item>
						<div class="promo-item flex flex-center-vh">
							<img src="./images/promo-item-img-2.jpeg" />
						</div>
					</mt-swipe-item>
					<mt-swipe-item>
						<div class="promo-item flex flex-center-vh">
							<img src="./images/promo-item-img-3.png" />
						</div>
					</mt-swipe-item>
				</mt-swipe>
			</div>
			<ul class="category-list flex flex-wrap-wrap">
				<li v-for="item,index in hotCategoryList" :key="item.index" class="item flex flex-direction-v flex-center-vh">
					<div class="category-icon-wrap">
						<img class="category-icon" :src="item.cover" />
					</div>
					<h5 class="category-name">{{item.name}}</h5>
				</li>
			</ul>
			<div class="video-list-main">
				<div class="hot-video-list">
					<h4 class="classify-title">热门推荐</h4>
					<ul class="video-list flex flex-wrap-wrap">
						<li @click="enterLiveRoom(item)" v-for="item,index in liveInfo" :key="item.index" class="item">
							<div class="item-inner">
								<div class="video-img-box">
									<img class="video-img" :src="item.cover" />
								</div>
								<h3 class="video-title text-one-line">{{item.title}}</h3>
								<div class="video-intro-box">
									<div class="video-classify text-one-line">
										{{item.name}}
									</div>
									<div class="video-read-num text-one-line">
										{{item.viewing_number}}
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<VLiveStyleMenu></VLiveStyleMenu>
		<VFooter></VFooter>
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import _userService from "@/service/userService";
import _liveService from "@/service/liveService";
import _categoryService from "@/service/categoryService";
import _sessionUser from "@/util/SessionUser";
import VSideMenu from "@/component/SideMenu/SideMenu";
import VLiveStyleMenu from "./LiveStyleMenu";
import VFooter from "@/component/Common/MyFooter/MyFooter";

export default {
    name: "Home",
    data() {
        return {
            // 直播列表信息
            liveInfo: "",
            // 直播热门分类
            hotCategoryList: []
        };
    },
    mounted() {
        let vm = this;
        _sessionUser.loadPage({
            scope: vm,
            exp: vm.userInfo,
            success: function() {
                // 获取在线直播信息
                vm.getLiveInfo({
                    is_live: 2,
                    callback: data => {
                        vm.liveInfo = data;
                    }
                });
                vm.getHotCategory();
                //					vm.addCategory();
                //					vm.updateCategory();
                //					vm.deleteCategory();
            }
        });
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        })
    },
    components: {
        VSideMenu,
        VFooter,
        VLiveStyleMenu
    },
    methods: {
        ...mapMutations(["SAVE_USER_SIGNIN", "SHOW_SIDEBAR"]),
        // 显示侧边栏
        openSideMenu() {
            let vm = this;
            vm.SHOW_SIDEBAR({
                isShowSideBar: true,
                isShowMask: true
            });
        },
        // 隐藏侧边栏
        closeSideMenu() {
            let vm = this;
            vm.SHOW_SIDEBAR({
                isShowSideBar: false,
                isShowMask: false
            });
        },
        // 获取热门直播分类
        getHotCategory() {
            let vm = this;
            let resultData;
            let data;
            let res = _categoryService.getHotCategory({
                success: function(response) {
                    resultData = response.data;
                    data = resultData.data;
                    if (resultData.success) {
                        vm.hotCategoryList = data;
                    }
                    console.log("获取热门直播分类：" + resultData.message);
                }
            });
            return res;
        },
        // 增加直播分类
        addCategory() {
            let vm = this;
            let resultData;
            let data;
            let res = _categoryService.addCategory({
                id: "",
                name: "英雄联盟",
                parentId: 8,
                success: function(response) {
                    resultData = response.data;
                    if (resultData.success) {
                    }
                    console.log("增加直播分类：" + resultData.message);
                }
            });
            return res;
        },
        // 更新直播分类
        updateCategory() {
            let vm = this;
            let resultData;
            let data;
            let res = _categoryService.updateCategory({
                id: 16,
                name: "英雄联盟2",
                parentId: 5,
                success: function(response) {
                    resultData = response.data;
                    if (resultData.success) {
                    }
                    console.log("更新直播分类：" + resultData.message);
                }
            });
            return res;
        },
        // 删除直播分类
        deleteCategory() {
            let vm = this;
            let resultData;
            let data;
            let res = _categoryService.deleteCategory({
                id: 16,
                success: function(response) {
                    resultData = response.data;
                    if (resultData.success) {
                    }
                    console.log("删除直播分类：" + resultData.message);
                }
            });
            return res;
        },
        // 获取在线的直播信息，is_live(1.离线;2.在线)
        getLiveInfo(param) {
            let vm = this;
            let resultData;
            let data;
            if (!param) {
                return;
            }
            let res = _liveService.getLiveInfo({
                user_id: param.user_id || "",
                is_live: param.is_live || "",
                page_number: param.page_number || 0,
                page_size: param.page_size || 20,
                success: function(response) {
                    resultData = response.data;
                    if (resultData.success) {
                        data = response.data.data;
                        param.callback(data);
                    }
                    console.log("获取在线的直播信息：" + resultData.message);
                }
            });
            return res;
        },
        // 进入直播间
        enterLiveRoom(row) {
            let vm = this;
            sessionStorage.setItem("roomChatInfo", JSON.stringify(row));
            vm.$router.push({
                path: "roomChat"
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.view-home {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    overflow: hidden;
    .page-scroller {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-bottom: 70px;
    }
    .home-header {
        padding: 10px 15px 0;
        .item-left {
            .userImg {
                width: 35px;
                height: 35px;
                object-fit: cover;
                border-radius: 50%;
            }
        }
        .item-right {
            padding: 2px 10px 0;
            .search-box {
                width: 100%;
                background-color: rgba(207, 207, 207, 0.2);
                border-radius: 5px;
                padding: 5px;
                text-align: center;
            }
            .icon-sousuo {
                color: #8e8e93;
            }
            .search-content {
                color: #8e8e93;
            }
        }
    }
    .promo-panel {
        height: 20vh;
        background-color: #afbdc4;
        margin: 15px 20px 10px;
        border-radius: 10px;
        overflow: hidden;
        .promo-item {
            height: 100%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
    .category-list {
        padding: 0 3%;
        .item {
            width: 20%;
            text-align: center;
            padding: 5px 0;
        }
        .category-icon-wrap {
        }
        .category-icon {
            width: 60%;
        }
        .category-name {
            font-weight: normal;
            color: #333333;
            font-size: 12px;
            word-break: keep-all;
            white-space: nowrap;
            transform: scale(0.8);
        }
    }
    .video-list-main {
        .hot-video-list {
        }
    }
    .classify-title {
        padding: 20px 0 0 15px;
        color: #333333;
    }
    .video-list {
        padding: 10px 15px 15px 0;
        .item {
            width: 50%;
            padding: 5px 0 5px 15px;
            margin-bottom: 5px;
            .item-inner {
                background-color: white;
                border-radius: 8px;
            }
            .video-img-box {
                .video-img {
                    border-radius: 8px;
                    height: 100px;
                    object-fit: cover;
                    width: 100%;
                }
            }
            .video-title {
                font-weight: normal;
                font-size: 15px;
                color: #353535;
                padding: 5px 5px 5px 10px;
            }
            .video-intro-box {
                color: #cfcfcf;
                font-size: 14px;
                padding: 0 5px 5px 10px;
                .video-classify {
                    width: 65%;
                    height: 20px;
                    font-weight: normal;
                    display: inline-block;
                    text-align: left;
                }
                .video-read-num {
                    width: 30%;
                    height: 20px;
                    display: inline-block;
                    text-align: right;
                }
            }
        }
    }
}
</style>

<style lang="scss">
.view-home {
}
</style>